<!DOCTYPE html>
<html  lang="en" class="no-ie" style="overflow:hidden;">
    <head>
        <meta charset="UTF-8">
        <title>资源占比省外部分</title>
        <script>
            "object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
                ue.interface.broadcast = function(e, t) {
                    if ("string" == typeof e) {
                        var o = [e, ""];
                        void 0 !== t && (o[1] = t);
                        var n = encodeURIComponent(JSON.stringify(o));
                        "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
                            "#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
                            .hash = n, document.location.hash = encodeURIComponent("[]"))
                    }
                }) : function(e) {
                ue.interface = {}, ue.interface.broadcast = function(t, o) {
                    "string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
                }
            }(ue.interface), (ue4 = ue.interface.broadcast);
        </script>
    <script type="text/javascript" src="./dist/echarts-5.3.2.min.js"></script>
    <script type="text/javascript" src="./static/js/jquery.min.js"></script>
    <script>
        $(function() {
            ue4("getSize", {
                mes: "get windows size"
            });
            ue4("getColor", {
                mes: "get all color"
            });
            ue4("getData", {
                mes: "get all data"
            });
            ue4("beginSize", {
                mes: BeginSize[0],
                mes2: BeginSize[1]
            });
            ue4("beginSizeY", {
                mes: BeginSize
            });
        });
        /*$(function () {
            
        });*/
    </script>
<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; width:100%">
    <div id="main" ></div>


    

    <script>
        let BeginSize = [312, 260];
        let resourcevalue=60;
        let gaguename='省外';
        let myChart = null;
        function fresh() {
            let option = {
            backgroundColor: '#000',
            graphic: {
                    elements: [
                        {
                            type: 'image',
                            z: -1,
                            style: {
                                image: 'https://s1.ax1x.com/2022/07/13/jRSaTO.png',
                                width: 275,
                                height: 175,
                            },
                            left: 'center',
                            top: 80,
                        },
                    ],
                },
            legend: {
                show: false,
            },
            series: [
                // 背景
                {
                    animation: false,
                    name: '底色',
                    type: 'gauge',
                    center: ['50%', '75%'],
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    radius: '85%',
                    max: 100,
                    zlevel: 100,
                    splitNumber: 5,

                    // 仪表盘指针
                    pointer: {
                        show: false,
                    },
                    // 仪表盘轴线相关配置
                    axisLine: {
                        show: false,
                    },
                    // 刻度样式
                    axisTick: {
                        show: false,
                    },
                    // 分隔线样式
                    splitLine: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                        distance: -30,
                        color: '#f6f7fb',
                        fontSize: 10,
                    },
                    // 表盘中指针的固定点
                    anchor: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 100,
                        },
                    ],
                },
                // 背景
                {
                    animation: false,
                    name: gaguename,
                    type: 'gauge',
                    center: ['50%', '75%'],
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    zlevel: 6,
                    splitNumber: 10,
                    // 展示当前进度
                    progress: {
                        show: true,
                        width: 16,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(255,255,255,0.15)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255,255,255,0.15)', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    // 仪表盘指针
                    pointer: {
                        show: false,
                    },
                    // 仪表盘轴线相关配置
                    axisLine: {
                        show: false,
                    },
                    // 刻度样式
                    axisTick: {
                        show: false,
                    },
                    // 分隔线样式
                    splitLine: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                        distance: 0,
                        formatter: function (value) {
                            return parseInt(value);
                        },
                        color: 'rgba(255,255,255,.85)',
                        fontSize: 12,
                    },
                    // 表盘中指针的固定点
                    anchor: {
                        show: false,
                    },

                    detail: {
                        show: true,
                        offsetCenter: ['0%', '40%'],
                        formatter: ['{a|34812}' + '{c|吨}', '{b|省外}'].join('\n'),
                        zlevel: 100,
                        color: '#64D6F5',
                        rich: {
                            a: {
                                color: '#f6f7fb',
                                fontWeight : '900',
                                fontSize: 18,
                            },
                            b: {
                                color: '#f6f7fb',
                                fontWeight : '900',
                                fontSize: 13,
                            },
                            c: {
                                color: '#f6f7fb',
                                
                                fontSize: 15,
                            },


                        },
                    },
                    data: [
                        {
                            value: 100,
                        },
                    ],
                },
                // 内容
                {
                    name: '投资',
                    type: 'gauge',
                    center: ['50%', '75%'],
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    zlevel: 10,
                    max: 100,
                    splitNumber: 16,
                    // 展示当前进度
                    progress: {
                        show: true,
                        width: 16,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#59a4f7', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#35dffe', // 100% 处的颜色
                                    },
                                ],
                                global: false,
                            },
                        },
                    },
                    // 仪表盘指针
                    pointer: {
                        show: true,
                        length: '90%',
                        itemStyle: {
                            opacity: 0.5,
                            color: '#39d9fd',
                        },
                    },
                    // 仪表盘轴线相关配置
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: [[1, '#304c60']],
                            width: 30,
                        },
                    },
                    // 刻度样式
                    axisTick: {
                        show: false,
                        distance: -45,
                        length: 10,
                        lineStyle: {
                            width: 1,
                            color: 'rgba(27, 133, 190,.25)',
                        },
                    },
                    // 分隔线样式
                    splitLine: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                    },
                    // 表盘中指针的固定点
                    anchor: {
                        show: false,
                    },
                    detail: {

                        show: true,
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: ['0%', '-20%'],
                        fontSize: 20,
                        zlevel: 100,
                        fontWeight: 'bolder',
                        formatter: function (value) {
                            return value + '%';
                        },

                        color: '#f6f7fb',
                    },

                    data: [
                        {
                            value: resourcevalue,
                        },
                    ],
                },


            ],
        };

        myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        }
        fresh();
        //浏览器测试用
				change(BeginSize[0], BeginSize[1]);

function change(x, y) {
    let div = document.getElementById("main");
    //alert("I am an alert box!!");
    div.style.width = x + "px";
    div.style.height = y + "px";
    var myOption = myChart.getOption();
    myChart.resize();
    let types = []
    myOption.series.forEach((item) => {
        types.push(item.type)
    })
    return types
}
/************下面数据***********/
ue.interface.TransData1 = function(data) {
    dataTemp1 = data;
    fresh();
};
    </script>
</body>

</html>